import { StatusBar } from 'expo-status-bar';
import React, { useState, useEffect } from 'react'
import {
  StyleSheet, Text, View, Image, ImageBackground,
  TextInput, ScrollView, Button,
  TouchableOpacity, FlatList, Modal, ToastAndroid, BackHandler
} from 'react-native';

const Bg = (props) => {

  let source = props.source
  let style = props.style
  let resizeMode = props.resizeMode


  return <View style={style}>
    <Image source={source} style={{ position: 'absolute', width: '100%', height: "100%" }} resizeMethod={resizeMode} />
    {props.children}
  </View>
}

export default function App() {
  //View本身就是一个弹性盒子，默认主轴方向是纵向
  //Text只能继承父级Text的样式,且Text不是弹性盒子
  //Image
  const [val, setVal] = useState('')
  const [page, setPage] = useState(1)
  const [refresh, setRefresh] = useState(false)
  const [show, setShow] = useState(false)
  let now = 0
  let getTopicts = (page) => {
    fetch(`https://cnodejs.org/api/v1/topics?page=${page}`)
      .then(res => res.json())
      .then(res => {
        setVal([...val, ...res.data])
      })
  }
  useEffect(() => {
    getTopicts(1)
    BackHandler.addEventListener(
      "hardwareBackPress",
      () => {
        if (Date.now() - now > 2000) {
          now = Date.now()
          ToastAndroid.show('确定要退出吗？', ToastAndroid.SHORT, ToastAndroid.BOTTOM)
          return true;
        } else {
          BackHandler.exitApp();
        }
      }
    );


  }, []);

  return (
    <View style={[styles.container, styles.bg]}>
      <Button title='显示' onPress={() => setShow(true)}></Button>
      <Modal
        animationType="slide"
        transparent={true}
        visible={show}
        // 点击返回箭头是触发
        onRequestClose={() => {
          setModalVisible(!show);
        }}
      >
        <View style={{
          flex: 1,//全屏
          justifyContent: 'center',
        }}>
          <Button title='隐藏'
            onPress={() => setShow(false)}>
          </Button>
        </View>
      </Modal>
      {/* <Bg
        style={{ width: 200, height: 200 }}
        source={require('./assets/icon.png')}
        resizeMode='contain'>
        <Text style={styles.txtColor}>344</Text>
      </Bg> */}
      {/* <FlatList
        onEndReached={item => {
          setPage(page + 1)
          getTopicts(page)
          console.log('下拉加载')
          // return (
          //   val.map((item) => <Text style={styles.text} key={item.id}>{item.title}</Text>)
          // )
          return item.id
        }}

        onRefresh={() => {
          console.log('上拉刷新')
          setRefresh(true)
          setPage(page - 1)
          setTimeout(() => {
            getTopicts(page)
            setRefresh(false)
          }, 3000)

        }}
        onEndReachedThreshold={5}
        refreshing={refresh}
        data={val}
        renderItem={({ item }) => <Text key={item.id} style={styles.text}>{item.title}</Text>}
      /> */}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,//全屏
    // alignItems: 'center',
    // justifyContent: 'center',
  },
  txtColor: {
    color: '#f00',
    fontSize: 30
  },
  text: {
    color: '#fff',
    fontSize: 30,
    marginTop: 10

  },
  bg: {
    backgroundColor: '#daf'
  },
  input: {
    height: 50,
    width: 280,
    borderColor: 'black',
    borderWidth: 1,
    margin: 20
  },
  btn: {
    height: 80,
    backgroundColor: 'red',
    alignItems: 'center',
    justifyContent: 'center'
  }
});
